<template>
	<view class="mainpadding">
		<!-- 请选择打卡题目 -->
		<!-- <view class="timu">
			<view class="xuznze margin_top">打卡题目</view>
			<view class="margin_top btnbox" v-for="item in history.task_category" :key="item.id">
				<view class="btn btn2">{{item.name}}</view>
			</view>
		</view> -->
		<!-- 今日打卡任务 -->
		<!-- <view class="renwu margin_top">
			<view class="xuznze ">打卡任务</view>
			<view class="wancheng">{{history.task.name}}</view>
		</view> -->
		<!-- 学习心得 -->
		<!-- <view class="xinde">
			<view class="xuznze ">学习时间/内容/心得</view>
			<view class="bgcf6 radius">{{history.content}}</view>
		</view> -->
		<!--请上传学习进度截图  -->
		<!-- <view class="jietu margin_top">
			<view class="xuznze ">学习截图</view>
			<view class="flexleft margin_top" >
				<view class="xuextup-box flexcenter" v-for="(item,index) in images" :key="index">
					<view class="xuextup radius">
						<image class="radius" :src="item" mode=""></image>
					</view>
				</view>
			</view>
		</view> -->
		<!-- 请选择打卡题目 -->
		<view class="timu">
			<view class="xuznze margin_top">打卡题目</view>
			<view class="flexleft flex_wrap">
				<view class="flexcenter btnbox margin_top" v-for="item in list" :key="item.id"
					@click="checkselect(item.id)">
					<view :class="item.id==selectcurrent?'btn btns1':'btn btn1'">{{item.task_category.name}}</view>
				</view>
			</view>
		</view>
		<!-- 今日打卡任务 -->
		<view class="renwu margin_top">
			<view class="xuznze ">打卡任务</view>
			<view v-for="item in list" :key="item.id">
				<view class="wancheng" v-show="item.id==selectcurrent">
					<text>{{item.task.name}}</text>
				</view>
			</view>
		</view>
		<!-- 学习心得 -->
		<view class="xinde">
			<view class="xuznze ">学习时间/内容/心得</view>
			<view v-for="item in list" :key="item.id">
				<view v-show="item.id==selectcurrent" class="textareabox radius mainpadding_top">
					<!-- <textarea class="textarea" maxlength="-1" placeholder="请上传学习心得..."
						v-model="item.content"></textarea> -->
						<view class="textarea">{{item.content}}</view>
				</view>
				<!-- <view class="flexright textarea">{{num}}/100字</view> -->
			</view>
		</view>
		<!--请上传学习进度截图  -->
		<view class="jietu margin_top">
			<view class="xuznze ">学习截图</view>
			<view v-for="(item) in list" :key="item.id">
				<view class="flexleft margin_top jietubox" v-show="item.id==selectcurrent">
					<view class="flexcenter xuextup-box" v-for="(ite,index) in item.images" :key="index">
						<view class="xuextup radius">
							<image class="radius" :src="ite" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 老师评价 -->
		<view class="pingjia margin_top" v-for="(item) in list" :key="item.id">
			<view v-show="item.id==selectcurrent&&item.replay!=''">
				<view class="laospj margin_top">老师评价</view>
				<view class="pjbox radius mainpadding margin_top">{{item.replay}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				currentdate: "",
				history:{},
				images:[],
				
				list: [],
				selectcurrent: "",
				currentdate: "",
				// 日期任务
				// task: {},
				content: "",
				upImg: [],
			}
		},
		onLoad(options) {
			this.currentdate = options.date
		},
		onShow() {
			this.gethistory()
		},
		methods: {
			gethistory(){
				httpRequest.request("/api/user/user_task", 'POST', {
					date: this.currentdate
				}, false, false, true).then(res => {
					res.data.forEach(item=>{
						item.images = item.images.split(",")
					})
					this.list = res.data
					this.selectcurrent = res.data[0].id
					// console.log(this.list,888)
					// this.history = res.data
					// this.images = res.data.images.split(",")
					// console.log(this.images,999)
				})
			},
			// 切换题目id
			checkselect(id) {
				this.selectcurrent = id
			},
		}
	}
</script>

<style lang="scss" scoped>
	.textareabox {
		background-color: #fafafa;
		.textarea {
			height: 150rpx;
		}
	}
	
	.textarea {
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #999999;
		width: 100%;
		box-sizing: border-box;
	}
	
	.bgcf6{
		background-color: #F6F6F6;
		height: 200rpx;
		padding: 30rpx 30rpx;
		font-size: 24rpx;
		margin: 30rpx 0;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #999999;
	}
	.pjbox {
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #DCB490;
		line-height: 36rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 15rpx 0rpx rgba(51, 51, 51, 0.1000);
	}

	.laospj {
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #333333;
	}
	.xuextup-box{
		width: 25%;
	}

	.xuextup {
		width: 150rpx;
		height: 150rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}

	.xuextup:nth-child(3n) {
		margin-right: 0;
	}

	.qdaka {
		padding: 30rpx 30rpx 60rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		box-sizing: border-box;
	}

	.xiaojiahao {
		width: 31rpx;
		height: 31rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	// .tuiku {
	// 	font-size: 30rpx;
	// 	font-family: Microsoft YaHei;
	// 	font-weight: bold;
	// 	color: #FFFFFF;
	// 	box-sizing: border-box;
	// 	text-align: center;
	// 	background: #DCB490;
	// 	box-shadow: 0rpx 0rpx 15rpx 0rpx rgba(51, 51, 51, 0.0500);
	// 	border-radius: 50rpx;
	// }

	.dibu {
		position: fixed;
		width: 100%;
		box-sizing: border-box;
		bottom: 60rpx;
		left: 0rpx;
	}

	.jietubox {
		flex-wrap: wrap;
	}

	.wentibox {
		width: 20%;
	}

	.tupianbox {
		position: relative;
	}

	.tupian {
		width: 150rpx;
		height: 150rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.beijing {
		display: flex;
		justify-content: center;
		align-items: center;
		background: #F6F6F6;
		box-shadow: 0rpx 0rpx 15rpx 0rpx rgba(51, 51, 51, 0.1000);
		width: 150rpx;
		height: 150rpx;
	}

	.xiaotubiao {
		position: absolute;
		top: -14rpx;
		right: -2rpx;
		width: 26rpx;
		height: 26rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	// .textarea {
	// 	font-size: 24rpx;
	// 	font-family: Microsoft YaHei;
	// 	font-weight: 400;
	// 	color: #999999;
	// 	background: #F6F6F6;
	// 	width: 100%;
	// 	box-sizing: border-box;
	// }

	.wancheng {
		text-indent: 48rpx;
		font-size: 24rpx;
		margin: 30rpx 0;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #999999;
	}

	// .btn2 {
	// 	background-color: rgba(229, 115, 91, .2);
	// 	color: #E5735B;
	// 	box-shadow: 0rpx 0rpx 5rpx 0rpx rgba(51, 51, 51, 0.1000);
	// }

	// .btn3 {
	// 	background: rgba(183, 209, 216, .2);
	// 	box-shadow: 0rpx 0rpx 5rpx 0rpx rgba(51, 51, 51, 0.1000);
	// }

	// .btn1 {
	// 	background: rgba(255, 175, 136, .2);
	// 	box-shadow: 0rpx 0rpx 5rpx 0rpx rgba(51, 51, 51, 0.1000);
	// 	color: #FFAF88;
	// }
	.btn1 {
		background-color: rgba(255, 175, 136, .2);
		box-shadow: 0rpx 0rpx 5rpx 0rpx rgba(51, 51, 51, 0.1000);
		color: #FFAF88;
		border: 1rpx solid #fff;
	}
	
	.btns1 {
		background-color: rgba(255, 175, 136, .2);
		box-shadow: 0rpx 0rpx 5rpx 0rpx rgba(51, 51, 51, 0.1000);
		color: #FFAF88;
		border: 1rpx solid #FFAF88;
	}

	.xuznze {
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
	}

	.btn {
		border-radius: 37rpx;
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 206rpx;
		height: 74rpx;
	}
	

	.btnbox {
		width: 33.33%;
	}
</style>
